import React from 'react'
import Axios from 'axios'
import '../base.css'
import { Form, Icon, Input, Button,Row,Col,message } from 'antd';
// import {connect} from 'react-redux'
import { SingIn } from '../../api/UserApi'

Axios.defaults.baseURL = 'http://localhost:9090'
class Login extends React.Component{
  state = {
    loading: false
  }
  handleSubmit = (e) => {
    const {history,form} = this.props
    e.preventDefault()
    form.validateFields((err,values) => {
      if(!err){
        this.setState({
          loading:true
        })
        SingIn(values).then(respinse => {
          const {data} = respinse
          if (data.code === 0) {
            message.success('登录成功',1,()=>{
              window.localStorage.setItem('users',JSON.stringify(data.data))
              // const URL = location.state || '/'
              console.log(this.props);
              // console.log(this.props.children);
              history.push('/monery')

            })
          }else{
            message.error(data.msg,1,()=>{
              this.setState({
                loading:false
              })
            })
          }
        })

      }
    })
  }
  render(){
    const { getFieldDecorator } = this.props.form
    const {loading} = this.state
    return (

      <div className="page-login">
        <Row type="flex" align="middle" className="page-login__row">
          <Col span={8} offset={7}>
            <div className="pagename">
            <h1>欢迎来到登录页面</h1>
            <Form className="page-login__from" onSubmit={this.handleSubmit}>
              <Form.Item>
                {/* <p>欢迎来到登录页面</p> */}
                {
                  getFieldDecorator('username',{
                    rules:[
                      { required:true,message:'Please input your username' },
                      {
                        type:'email',
                        message:'请输入正确的邮箱地址'
                      }
                    ]
                  })(
                    <Input
                    prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
                    placeholder="Username"
                />
                  )
                }

              </Form.Item>
              <Form.Item>
                {
                  getFieldDecorator('password',{
                    rules:[
                      { required:true, message:'Please input your password' },
                      {
                        min: 6, message:'最少6位'
                      },
                      {
                        max:12,message:'最多12位'
                      }
                    ]
                  })(
                    <Input
                    prefix={<Icon type="lock" style={{color:'rgba(0,0,0,.25)'}}/>}
                    type="password" placeholder="Password"
                  />
                  )
                }
              </Form.Item>
              <span className="page-span" onClick={()=>{ this.props.history.push('./register')}}>没有账号，快去注册</span>
              <Form.Item>
                <Button type="primary" htmlType="submit"
                loading={loading} className="page-login__form-button">登录</Button>
              </Form.Item>
            </Form>
            </div>
          </Col>
        </Row>
      </div>
    )
  }
}
export default Form.create()(Login)

